<template>
    <div>
        <div>
            <div class="addInitInstitutionsType">
                <div style="float: left;display: flex;">
                    <el-input
                            @clear="insertInstitutionsType"
                            clearable
                            style="margin-right: 8px;"
                            class="insertInstitutionsType"
                            prefix-icon="el-icon-search"
                            placeholder="请输入机构类别名称"
                            v-model="typeName"
                            @keydown.enter.native="initInstitutionsTypeQuery">
                    </el-input>
                    <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initInstitutionsTypeQuery">查询</el-button>
                </div>

                <div>
                    <el-button
                            type="primary"
                            @click="insertInstitutionsType"><i class="el-icon-add-location"></i><span>新增类别</span>
                    </el-button>
                </div>
            </div>
            <!-- 列表 -->
        <div>
            <el-table
                    :data="InstitutionsTypeList"
                    stripe
                    border
                    style="width: 64.5%"
                    v-loading="loading"
                    element-loading-text="正在加载..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="类别编号"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.institutionsTypeId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="类别名称"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.typeName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="530">
                    <template slot-scope="scope">
                        <el-button
                                @click="updateInstitutionsType(scope.row)"><i class="el-icon-edit">编辑</i></el-button>
                        <el-button
                                type="danger"
                                @click="deleteInstitutionsType(scope.row)"><i class="el-icon-delete">删除</i></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="deleteBatchInstitutionsType" type="danger" style="margin-top: 8px;float: left;" :disabled="this.multipleSelection.length==0"><i class="el-icon-delete">批量删除</i></el-button>
        </div>
        </div>
        <div>
            <el-dialog
                :title="dialogtitle"
                :visible.sync="dialogVisible"
                width="40%">
                <el-form :model="InstitutionsTypeInfo" :rules="rules" ref="InstitutionsTypeInfoForm">
                        <el-row>
                            <el-col>
                                <el-form-item label="类别名称:" prop="typeName">
                                    <el-input clearable prefix-icon="el-icon-edit" v-model="InstitutionsTypeInfo.typeName" placeholder="请输入类别名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addTypeInstitutions">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>

export default {
    name:"InstitutionsType",
    data(){
        return{
            loading: false,
            typeName:'',
            InstitutionsTypeList:[],
            multipleSelection:[],
            dialogtitle:'',
            dialogVisible:false,
            InstitutionsTypeInfo:{
                institutionsTypeId:'',
                typeName:''
            },
            // 校验规则
            rules: {
                typeName:[{required:true,message:'请输入类别名称',trigger:'blur'},
                          {
                            pattern:/^(a-z|A-Z|0-9)*[^$%^&*;:,<>?()\""\']{1,128}$/,
                            message:'类别名称超过128个字符',
                            trigger:'blur',
                          }]
            },
        }
    },
    mounted(){
        // 初始化机构列表
        this.initInstitutionsTypeQuery();
    },
    methods:{
        initInstitutionsTypeQuery(){
            this.loading = true;
            this.getRequest("/account/InstitutionsType/query/InstitutionsTypeList?typeName="+this.typeName).then(resp => {
                this.loading = false;
                if (resp) {
                    this.InstitutionsTypeList = resp.data;
                }
            });
        },
        updateInstitutionsType(data){
            this.initInstitutionsTypeQuery();
            this.dialogtitle = "编辑机构类别";
            this.dialogVisible = true;
            this.InstitutionsTypeInfo = data;
        },
        deleteInstitutionsType(data){
            this.$confirm('此操作将永久删除【'+data.typeName+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/account/InstitutionsType/delete/InstitutionsTypeInfo?institutionsTypeId='+data.institutionsTypeId).then(resp=>{
                        if (resp){
                            this.initInstitutionsTypeQuery();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
        deleteBatchInstitutionsType(){
            this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let institutionsTypeId = '?';
                    this.multipleSelection.forEach(item=>{
                        institutionsTypeId += 'institutionsTypeId='+item.institutionsTypeId+'&';
                    })
                    this.deleteRequest("/account/InstitutionsType/delete/BatchInstitutionsTypeInfo"+ institutionsTypeId).then(resp=>{
                        if (resp){
                            this.initInstitutionsTypeQuery();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        insertInstitutionsType(){
            this.dialogtitle = "新增机构类别";
            this.initInstitutionsTypeInfo();
            this.dialogVisible = true;
        },
        initInstitutionsTypeInfo(){
            this.InstitutionsTypeInfo.institutionsTypeId = '';
            this.InstitutionsTypeInfo.typeName = '';
        },
        addTypeInstitutions(){
            if (this.InstitutionsTypeInfo.institutionsTypeId) {
                    this.$refs['InstitutionsTypeInfoForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/account/InstitutionsType/update/InstitutionsTypeInfo", this.InstitutionsTypeInfo).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initInstitutionsTypeQuery();
                                    this.initInstitutionsTypeInfo();
                                }
                            })
                        }
                    });
            } else {
                this.$refs['InstitutionsTypeInfoForm'].validate(valid => {
                    if (valid) {
                        this.postRequest("/account/InstitutionsType/insert/InstitutionsTypeInfo", this.InstitutionsTypeInfo).then(resp => {
                            if (resp) {
                                // 关闭弹框
                                this.dialogVisible = false;
                                // 初始化列表
                                this.initInstitutionsTypeQuery();
                                // 初始化弹框值
                                this.initInstitutionsTypeInfo();
                            }
                        })
                    }
                });
            }
        }
    }
}
</script>

<style>
    .insertInstitutionsType{
        width: 300px;margin-right: 8px;
    }
    .addInitInstitutionsType{
        margin-bottom: 10px;
    }
</style>
